@keyframes background-pan {
	from {
		background-position: 0% center;
	}

	to {
		background-position: -200% center;
	}
}

@keyframes scale {
	from,
	to {
		transform: scale(0);
	}

	50% {
		transform: scale(1);
	}
}

@keyframes rotate {
	from {
		transform: rotate(0deg);
	}

	to {
		transform: rotate(180deg);
	}
}

.star {
	--size: clamp(20px, 1.5vw, 30px);

	animation: scale 700ms ease forwards;
	display: block;
	height: var(--size);
	left: var(--star-left);
	position: absolute;
	top: var(--star-top);
	width: var(--size);
}

.star > svg {
	animation: rotate 1000ms linear infinite;
	display: block;
	opacity: 0.7;
}

.star > svg > path {
	fill: #7b3907;
}

.magicText {
	--purple: rgba(72, 130, 244, 0.868);
	--violet: #9a80f7;
	--pink: #f7f7f7;
	animation: background-pan 3s linear infinite;
	background: linear-gradient(
		to right,
		var(--purple),
		var(--violet),
		var(--pink),
		var(--purple)
	);
	background-size: 200%;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	white-space: nowrap;
}
